<template>
  <el-dialog :visible="showDialog" width="50%" @close="close">
    <span
      slot="title"
      style="font-size: 24px; color: #2e4562; font-weight: bold"
    >
      添加自定义用户协议
    </span>
    <el-form label-width="120px">
      <el-form-item>
        <span
          slot="label"
          style="font-size: 21px; color: #2e4562; margin-right: 10px"
          >协议名称</span
        >
        <el-input v-model="form.name" style="width: 70%" />
      </el-form-item>
      <el-form-item>
        <div
          slot="label"
          style="font-size: 21px; color: #2e4562; margin-right: 10px"
        >
          协议详情
        </div>
        <quill-editor
          ref="myQuillEditor"
          v-model="content"
          :options="editorOptionJieDa"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)"
        />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template #footer>
      <el-button class="cancel" @click="$emit('close-dialog')">取消</el-button>
      <el-button class="add" type="primary">保存</el-button>
    </template>
  </el-dialog>
</template>

<script>
// 富文本
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: {
        name: "",
      }
    }
  },
  methods: {
    close () {
      this.$emit('close-dialog')
      this.form.name = ''
    }
  },
}
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  background-color: #f0f4fa !important;
}
.cancel {
  width: 108px;
  height: 40px;
  text-align: center;
  font-size: 20px;
  color: #2f4663;
  background: #f0f4fa;
  border-radius: 25px;
  border: 0;
}
.add {
  width: 108px;
  height: 40px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  background: #ed8e1e;
  border-radius: 25px;
  border: 0;
}
</style>